<!-- 机械中心详情 -->
<template>
  <div class="MechanicsInfoData">
    <NavBarHeader class="navBarHeader"></NavBarHeader>
    <div class="container">
      <div class="containerNavBarBox">
        <!-- 机械类型 -->
        <div class="mechanicsNavBarBox">
          <div class="navBarTitle">机械类型:</div>
          <ul :class="isShow ? 'navBariList1' : 'navBariList'">
            <li
              class="all"
              :class="{ activeClass: currentIndex1 == 1 }"
              @click="currentBtn1(currentIndex1 == 1)"
            >
              全部
            </li>
            <li
              :class="[
                isShow ? 'navBarItem1' : 'navBarItem',
                { activeClass: currentIndex2 == item.num },
              ]"
              @click="onCurrentBtn(item.num, item.name)"
              v-for="(item, index) of mechanicsList"
              :key="index"
            >
              {{ item.name }}
            </li>
          </ul>
          <!-- 下拉框 -->
          <div
            class="dwonIconBox"
            @click="downBtn"
            v-show="mechanicsList.length > 8"
          >
            <img
              src="./../../../../../public/img/mechanics/dwonIcon.png"
              :class="isShow ? 'rotateUp' : 'downIcon'"
            />
          </div>
        </div>
        <!-- 机械品牌 -->
        <div class="brandNarBarBox">
          <div class="flexListRow">
            <div class="navBarTitle">机械品牌:</div>
            <ul class="navBariListBrand">
              <li
                class="all"
                :class="{ activeClass: currentIndex3 == 1 }"
                @click="currentBtn2(currentIndex3 == 1)"
              >
                全部
              </li>
              <li
                class="navBarItem"
                :class="{ activeClass: currentIndex4 == i }"
                v-for="(item, i) of brandTitle"
                :key="i"
                @click="onCurrentBtn1(i, item.name)"
              >
                {{ item.name }}
              </li>
            </ul>
            <!-- 下拉框 -->
            <div
              class="dwonIconBox"
              @click="downBtnBrand"
              v-show="brandTitle.length > 8"
            >
              <img
                src="./../../../../../public/img/mechanics/dwonIcon.png"
                :class="isBrand ? 'rotateUp1' : 'downIcon1'"
              />
            </div>
          </div>
          <!-- ABCD弹框内容 -->
          <div v-show="isBrand" class="searchBox">
            <div class="titleNavItem">
              <div class="titleNavListItem">
                <div
                  :class="{ activeClass: currentIndex5 == brandI }"
                  v-for="(brandItemList, brandI) of brandItemList"
                  :key="brandI"
                  @mouseover="onCurrentBtn2(brandI, brandItemList.children)"
                >
                  {{ brandItemList.name }}
                </div>
              </div>
            </div>
            <div class="navItemName">
              <div
                class="navItemNameOne"
                :class="{
                  activeClass1: currentIndex6 == brandItemNameList.brand_id,
                }"
                v-for="(brandItemNameList, brandJ) of brandName"
                :key="brandJ"
                @click="
                  onCurrentBtn3(
                    brandItemNameList.brand_id,
                    brandItemNameList.brand_name
                  )
                "
              >
                {{ brandItemNameList.brand_name }}
              </div>
            </div>
          </div>
        </div>
        <!-- 机械地址 -->
        <div class="mechanicsNavBarBoxAddress">
          <div class="brandTitle">
            机械地点：<input
              class="addressName"
              disabled
              placeholder="请选择机械地点"
              v-model="currentIndex7"
            />
            <img
              src="./../../../../../public/img/mechanics/downImg.png"
              :class="isAddress ? 'rotateUp2' : 'downBtn'"
              @click="onAddress"
            />
          </div>
          <div v-show="isAddress">
            <div class="navItemName">
              <div
                class="navItemNameOne"
                :class="{
                  activeClass1: currentIndex7 == brandItemNameList.province,
                }"
                v-for="(brandItemNameList, brandA) of addressList"
                :key="brandA"
                @click="
                  onCurrentBtn4(
                    brandItemNameList.province,
                    brandItemNameList.provinceid
                  )
                "
              >
                {{ brandItemNameList.province }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 机械列表 -->
      <div class="mechanicsListBox" v-loading="loading">
        <!-- <a :href="'https://www.honglonglong.net/static/machine/'+itemMechanicsListBox.machine_id+'.html'" target="_blank" rel="noopener noreferrer"></a> -->
        <!-- <router-link   :to="{
            path: '/MechanicsItemInfo',
            query: {
              machineId: itemMechanicsListBox.machine_id,
              currentIndex: 2,
            },
          }"></router-link> -->
        <a
          class="mechanicsItem"
          v-for="(
            itemMechanicsListBox, mechanicsListBoxIndex
          ) of mechanicsListBox"
          :key="mechanicsListBoxIndex"
          :href="
            'https://www.honglonglong.net/static/machine/' +
            itemMechanicsListBox.machine_id +
            '.html'
          "
        >
          <div class="itemImg">
            <img :src="itemMechanicsListBox.jxzj_thumb" class="mechanicsImg" />
            <div class="itemAddress">{{ itemMechanicsListBox.area }}</div>
          </div>
          <div class="mechanicsItemInfo">
            <div class="titleMoneyWarp">
              <div>
                <div class="itemStyleBg">
                  <div
                    class="itemStyleBgMoney"
                    v-if="
                      itemMechanicsListBox.unit_price != undefined
                        ? itemMechanicsListBox.unit_price.length > 1
                        : ''
                    "
                  >
                    ¥{{ itemMechanicsListBox.unit_price[0].price
                    }}<span class="itemStyleNum">{{
                      itemMechanicsListBox.unit_price[0].unit
                    }}</span>
                  </div>
                  <div
                    class="itemStyleBgOne"
                    v-if="
                      itemMechanicsListBox.unit_price != undefined
                        ? itemMechanicsListBox.unit_price.length == 1
                        : ''
                    "
                  >
                    {{ itemMechanicsListBox.unit_price[0].price
                    }}<span class="itemStyleNum">{{
                      itemMechanicsListBox.unit_price[0].unit
                    }}</span>
                  </div>
                </div>
                <div
                  class="itemStyleBgOne"
                  v-if="!itemMechanicsListBox.unit_price"
                >
                  面议
                </div>
              </div>
            </div>
            <div class="itemTitleName">{{ itemMechanicsListBox.name }}</div>
            <div class="styleBorder">
              <div class="styleTitle">
                <img
                  src="./../../../../../public/img/mechanics/styleBorderLeftIcon.png"
                  class="styleImg"
                />
                <div class="styleTitleName">
                  排放标准
                  {{
                    itemMechanicsListBox.standard
                      ? itemMechanicsListBox.standard
                      : "未知"
                  }}
                </div>
              </div>
              <!-- <div class="styleBottom">
                <img
                  src="./../../../../../public/img/mechanics/styleBorderTime.png"
                  class="styleImg"
                />
                <div class="styleTitleName">
                  出厂日期 
                  {{
                    itemMechanicsListBox.production_date
                      ? itemMechanicsListBox.production_date
                      : "未知"
                  }}
                </div>
              </div> -->
            </div>
          </div>
        </a>
        <div class="btm_right" v-if="mechanicsListBox.length > 0">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="index"
            :page-size="size"
            :page-count="pageCount"
            background
            :pager-count="11"
            layout="prev, pager, next"
          ></el-pagination>
        </div>
        <div class="searchNoMsg" v-if="mechanicsListBox.length < 1"></div>
        <div class="searchNoMsgName" v-if="mechanicsListBox.length < 1">
          搜索无结果
        </div>
      </div>
    </div>
    <FooterBar class="footerBar"></FooterBar>
  </div>
</template>

<script >
import NavBarHeader from "../../../../components/NavBarHeader";
import FooterBar from "../../../../components/FooterBar";
import {
  getMachinetypemenuuc,
  getMachineList,
  getBrandmenuByAToZ,
  getAddressProvince,
} from "./../../../../apis/api.js";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    NavBarHeader,
    FooterBar,
  },
  data() {
    // 这里存放数据
    return {
      userInfo: {},
      currentIndex1: this.$route.query.currentIndex1
        ? this.$route.query.currentIndex1
        : -1, //机械全部
      currentIndex2: this.$route.query.idx ? this.$route.query.idx : -1, //机械点击
      currentIndex3: 1, //品牌全部
      currentIndex4: -1, //品牌点击
      currentIndex5: -1, //品牌字母
      currentIndex6: -1, //品牌字母下的子分类品牌
      currentIndex7: "全国", //地址选中
      mechanicsList: [], //一级导航数据
      codeInfo: "",
      typeInfo: "",
      brandType: "",
      // 机械品牌固定写死的数据
      brandTitle: [
        {
          id: 1,
          name: "中国一汽",
        },
        {
          id: 2,
          name: "北方重工",
        },
        {
          id: 2,
          name: "东风",
        },
        {
          id: 2,
          name: "柳工",
        },
        {
          id: 2,
          name: "合力",
        },
        {
          id: 2,
          name: "三一",
        },
        {
          id: 2,
          name: "徐工",
        },
        {
          id: 2,
          name: "日立",
        },
        {
          id: 2,
          name: "中联重科",
        },
      ],
      pagenum: 0,
      page_size: 0, //当前机械列表个数
      size: 10,
      page: 1,
      total: 1,
      pageCount: 10,
      brandItemList: [], //A_Z
      brandName: [], //下拉A_Z展示的数据
      mechanicsListBox: [], //数据列表
      addressList: [], //地址
      isShow: false,
      isBrand: false,
      isAddress: false,
      loading: true,
      searchname: "", //搜索
    };
  },
  // 过滤器
  filters: {},
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    $route() {
      this.searchname = this.$route.query.searchname;
      console.log(this.$route.query.searchname);
      this.getMachineList();
      this.searchname = "";
    },
  },
  // 方法集合
  methods: {
    // 页数改变事件
    handleSizeChange(size) {
      this.size = size;
      this.getMachineList(this.typeInfo, this.brandType, this.codeInfo);
      // this.mechanicsListBox = this.paging(size, this.index);
    },
    // 页码改变事件
    handleCurrentChange(current) {
      this.index = current;
      this.pagenum = current;
      this.getMachineList(this.typeInfo, this.brandType, this.codeInfo);
      window.scrollTo(0, 0);

      // this.mechanicsListBox = this.paging(this.size, current);
    },
    // 本地分页的方法
    // paging(size, current) {
    //   const tableList = JSON.parse(JSON.stringify(this.mechanicsListBox));
    //   const tablePush = [];
    //   tableList.forEach((item, index) => {
    //     if (size * (current - 1) <= index && index <= size * current - 1) {
    //       tablePush.push(item);
    //     }
    //   });
    //   return tablePush;
    // },

    downBtn() {
      this.isShow = !this.isShow;
    },
    downBtnBrand() {
      this.isBrand = !this.isBrand;
    },
    onAddress() {
      this.isAddress = !this.isAddress;
    },
    // 跳转机械详情
    gomechanicsInfo(machineId) {
      // if(this.userInfo){
      this.$router.push({
        path: "/MechanicsItemInfo",
        query: { machineId, currentIndex: 2 },
      });
    },
    // 机械菜单全部
    currentBtn1() {
      this.currentIndex1 = 1;
      this.currentIndex2 = -1;
      // 清空传递过来的搜索内容的值
      this.searchname = "";
      this.pagenum = 0;
      this.typeInfo = "";
      this.getMachineList(this.typeInfo, this.brandType, this.codeInfo);
    },
    // 机械单点击选中
    onCurrentBtn(type) {
      if (this.typeInfo == type) {
        this.typeInfo = "";
        this.currentIndex1 = 1;
        this.currentIndex2 = -1;
      } else {
        this.typeInfo = type;
        this.currentIndex2 = type;
        this.currentIndex1 = "";
      }
      this.searchname = "";
      this.pagenum = 0;
      this.getMachineList(this.typeInfo, this.brandType, this.codeInfo);
    },
    // 品牌全部
    currentBtn2() {
      this.currentIndex3 = 1;
      this.currentIndex4 = -1;
      this.currentIndex1 = "";
      this.pagenum = 0;
      this.brandType = "";
      this.getMachineList(this.typeInfo, this.brandType, this.codeInfo);
    },
    // 品牌选中
    onCurrentBtn1(index, name) {
      if (this.currentIndex4 == index) {
        this.currentIndex3 = 1;
        this.currentIndex4 = -1;
        this.brandType = "";
      } else {
        this.brandType = name;
        this.currentIndex4 = index;
        this.currentIndex3 = "";
      }
      this.searchname = "";
      this.pagenum = 0;
      this.getMachineList(this.typeInfo, this.brandType, this.codeInfo);
    },
    // 品牌ABCD
    onCurrentBtn2(index, itemData) {
      this.currentIndex5 = index;
      // this.currentIndex6 = -1
      this.searchname = "";
      this.brandName = itemData;
    },
    // 品牌ABCD下的数据选中
    onCurrentBtn3(index, brandName) {
      if (this.brandType == brandName) {
        this.currentIndex3 = 1;
        this.currentIndex4 = -1;
        this.currentIndex6 = -1;
        this.brandType = "";
      } else {
        this.brandType = brandName;
        this.currentIndex6 = index;
      }
      this.searchname = "";
      this.pagenum = 0;
      this.getMachineList(this.typeInfo, this.brandType, this.codeInfo);
    },
    // 地点选中
    onCurrentBtn4(index, code) {
      if (this.codeInfo == code) {
        this.codeInfo = "";
        this.currentIndex7 = "全国";
      } else {
        this.codeInfo = code;
        this.currentIndex7 = index;
      }
      this.searchname = "";
      this.pagenum = 0;
      this.getMachineList(this.typeInfo, this.brandType, this.codeInfo);
    },
    // 获取机械一级导航
    async getMachinetypemenuuc() {
      try {
        let res = await getMachinetypemenuuc();
        if (res.data.result == "1") {
          this.mechanicsList = res.data.body.typeList;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 机械大厅列表
    async getMachineList(type, brandName, code) {
      // console.log(type, brandName, code);
      let data = {
        page: this.pagenum,
        type: type ? type : "",
        tags: "",
        adcode: code ? code : "",
        brands: brandName ? brandName : "",
        searchname: this.searchname ? this.searchname : "",
      };
      try {
        let res = await getMachineList(data);
        if (this.pagenum == 0) {
          this.mechanicsListBox = [];
          this.page_size = 0;
        }
        if (res.data.result == "1") {
          var mechanicsList = res.data.body.list;
          // this.mechanicsListBox = this.mechanicsListBox.concat(mechanicsList);
          this.size = mechanicsList.length;
          this.mechanicsListBox = mechanicsList;
          this.index = res.data.body.current_page;
          this.loading = false;
          this.total = res.data.body.count;
          this.pageCount = isNaN(parseInt(this.total / 40) + 1)
            ? 10
            : parseInt(this.total / 40) + 1;
          // console.log(this.total / 40);
        }
      } catch (e) {
        this.mechanicsListBox = [];
        this.size = 0;
        this.loading = true;
      }
    },
    // 机械品牌A_Z
    async getBrandmenuByAToZ() {
      try {
        let res = await getBrandmenuByAToZ();
        if (res.data.result == "1") {
          this.brandItemList = res.data.body.brands;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取地址
    async getAddressProvince() {
      try {
        let res = await getAddressProvince();
        if (res.data.result == "1") {
          this.addressList = res.data.body.list;
          this.addressList.unshift({
            province: "全国",
            provinceid: "",
          });
          // console.log(this.addressList);
        }
      } catch (e) {
        console.log(e);
      }
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.userInfo = window.localStorage.getItem("userInfo");
    // 传递过来的搜索内容
    this.getMachinetypemenuuc();
    this.searchname = this.$route.query.searchname;
    this.pagenum = 0;
    if (!this.$route.query.idx) {
      this.currentBtn1();
    } else {
      this.getMachineList(this.$route.query.idx);
    }
    this.getBrandmenuByAToZ();
    this.getAddressProvince();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  ctivated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>
.btm_right {
  width: 100%;
  text-align: right;
  height: 50px;
  margin-right: 26px;
  ul {
    li {
      font-size: 14px;
      font-weight: 400;
      color: rgba(96, 98, 102, 1);
    }
  }
}
.navBarHeader {
  background: #1c1e2b;
  z-index: 1000;
}
.container {
  margin: 0 auto;
  box-sizing: border-box;
}
.containerNavBarBox {
  box-sizing: border-box;
  box-shadow: 0px 2px 10px 0px rgba(234, 234, 234, 0.5);
  background-color: #fff;
  padding-bottom: 20px;
  padding-top: 35px;
}
.mechanicsNavBarBox {
  width: 1180px;
  margin: 0 auto;
  display: flex;
}
.mechanicsNavBarBoxAddress {
  width: 1180px;
  display: flex;
  flex-direction: column;
  margin: 25px auto 0 auto;
}
.brandNarBarBox {
  width: 1180px;
  display: flex;
  margin: 15px auto 0 auto;
  flex-direction: column;
}
.flexListRow {
  display: flex;
  align-items: center;
}
.navBarTitle {
  font-size: 14px;
  color: #333;
}
// li
.navBarItem {
  font-size: 14px;
  // text-align: center;
  white-space: nowrap;
  color: #333;
  min-width: 110px;
  position: relative;
  cursor: pointer;
  margin-right: 7px;
}
.navBarItem1 {
  font-size: 14px;
  color: #333;
  min-width: 105px;
  margin-bottom: 20px;
   position: relative;
   margin-right: 7px;
  cursor: pointer;
}
// ul
.navBariList {
  display: flex;
  max-width: 1000px;
  overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
  margin-left: 40px;
}
.navBariList1 {
  display: flex;
  flex-wrap: wrap;
  max-width: 1000px;
  margin-left: 40px;
  // text-align: center;
}
.navBariListBrand {
  display: flex;
  max-width: 1000px;
  overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
  margin-left: 40px;
}
.dwonIconBox {
  // padding-top: 10px;
  box-sizing: border-box;
}
.downIcon {
  width: 28px;
  height: 28px;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}
.downIcon1 {
  width: 28px;
  height: 28px;
  cursor: pointer;
  margin-top: 10px;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}
.all {
  min-width: 90px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}
.brandTitle {
  color: #333;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.searchBox {
  margin-top: 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.titleNavListItem {
  width: 930px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  cursor: pointer;
}
.titleNavItem {
  width: 1130px;
  background: #f7f8fa;
  height: 43px;
  line-height: 43px;
}
.navItemName {
  width: 980px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  font-size: 12px;
  color: #333;
}
.navItemNameOne {
  width: 100px;
  margin-top: 15px;
  margin-bottom: 15px;
  cursor: pointer;
}
.downBtn {
  width: 18px;
  height: 18px;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}
.addressName {
  height: 20px;
  text-align: center;
  font-size: 14px;
  color: #333;
}
.rotateUp {
  transform: rotate(180deg);
  width: 28px;
  height: 28px;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}
.rotateUp1 {
  transform: rotate(180deg);
  width: 28px;
  height: 28px;
  cursor: pointer;
  margin-top: 10px;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}
.rotateUp2 {
  transform: rotate(180deg);
  width: 18px;
  height: 18px;
  margin-left: 5px;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}
.mechanicsListBox {
  margin: 50px auto 0 auto;
  width: 1180px;
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
}
.mechanicsItem {
  width: 275px;
  height: 370px;
  margin-bottom: 30px;
  margin-right: 15px;
  cursor: pointer;
}
.itemImg {
  width: 275px;
  height: 242px;
  overflow: hidden;
  position: relative;
}
.mechanicsImg:hover {
  width: 275px;
  height: 243px;
  transform: scale(1.1, 1.1); /*开始为原始大小*/
  -webkit-transform: scale3d(1.1, 1.1);
  transition: 0.8s transform;
  -webkit-transition: 0.8s transform;
}
.mechanicsImg {
  width: 275px;
  height: 243px;
  object-fit: cover;
  transform: scale(1, 1); /*开始为原始大小*/
  -webkit-transform: scale3d(1.1, 1.1);
  transition: 0.8s transform;
  -webkit-transition: 0.8s transform;
}
.mechanicsItemInfo {
  width: 273px;
  height: 129px;
  border: 1px solid #ebeef5;
}

.itemStyleBgMoney {
  font-size: 20px;
  color: #ff855b;
}
.itemStyleNum {
  font-size: 12px;
  color: #ff855b;
}
.itemStyleBgOne {
  color: #ff7d59;
  font-size: 20px;
}
.itemTitleName {
  font-size: 14px;
  height: 40px;
  color: #333;
  margin-top: 4px;
  margin-left: 10px;
  margin-right: 10px;
  box-sizing: border-box;
}
.itemAddress {
  font-size: 14px;
  color: #fff;
  width: 100%;
  height: 34px;
  line-height: 34px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  text-align: center;
}
.activeClass {
  color: #ff855b;
  font-size: 14px;
  cursor: pointer;
}
.activeClass1 {
  color: #ff855b;
  font-size: 12px;
  width: 100px;
  cursor: pointer;
  margin-top: 15px;
  margin-bottom: 15px;
}
.searchNoMsg {
  background: url("https://hll-prod.oss-cn-beijing.aliyuncs.com/hll_newPc/Personal/searchNoMsg.png")
    no-repeat;
  background-size: 100%, 100%;
  width: 371px;
  height: 200px;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 10%;
  margin-bottom: 10%;
}
.searchNoMsgName {
  font-size: 14px;
  color: #333;
  margin: 21% auto 0 15%;
}
.titleMoneyWarp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 15px 10px 0 10px;
}
.styleBorder {
  display: flex;
  align-items: center;
  // padding-top: 12px;
  padding-left: 16px;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  border-top: 1px solid #ebeef5;
  margin-top: 5px;
}
.styleTitle {
  display: flex;
  align-items: center;
}
.styleBottom {
  display: flex;
  align-items: center;
  margin-left: 23px;
}
.styleTitleName {
  font-size: 12px;
  color: #999;
  margin-left: 5px;
}
.styleImg {
  width: 15px;
  height: 15px;
}
</style>
